/**
 * Created by Weiler on 2017/9/22.
 */
var $pageID;
window.onload = function () {
    'use strict';
    $(document).on("pageAnimationStart", function (e, pageId, $page) {
        $.closePanel();
    });
    $(document).on("pageInit", function(e, pageId, $page) {
        $pageID = pageId;
        switch (pageId) {
            case 'payment-card':
                $.initStripe();
                break;
        }
    });

    var stripePayCheck = true;
    var stripeTokenCheck = true;
    $.initStripe = function () {
        // Create a Stripe client
        var stripe = Stripe('pk_live_8iX0c9ZC8OSghk8XZ3mhLZn3');

        // Create an instance of Elements
        var elements = stripe.elements();

        // Custom styling can be passed to options when creating an Element.
        // (Note that this demo uses a wider set of styles than the guide below.)
        var style = {
            base: {
                color: '#32325d',
                lineHeight: '24px',
                fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                fontSmoothing: 'antialiased',
                fontSize: '16px',
                '::placeholder': {
                    color: '#aab7c4'
                }
            },
            invalid: {
                color: '#fa755a',
                iconColor: '#fa755a'
            }
        };
        var card = null;
        // Create an instance of the card Element
        card = elements.create('card', {hidePostalCode: true, style: style});
        // Add an instance of the card Element into the `card-element` <div>
        card.mount('#card-element');

        // Handle real-time validation errors from the card Element.
        card.addEventListener('change', function(event) {
            var displayError = document.getElementById('card-errors');
            if (event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });

        $(document).on('click','#stripeSubmit', function () {
            if(stripeTokenCheck)
            {
                stripeTokenCheck = false;
                stripe.createToken(card).then(function(result) {
                    if (result.error) {
                        // Inform the user if there was an error
                        var errorElement = document.getElementById('card-errors');
                        errorElement.textContent = result.error.message;
                        stripeTokenCheck = true;
                    } else {
                        // Send the token to your server
                        stripeTokenHandler(result.token);
                    }
                });
            }
        });

    };

    function stripeTokenHandler(token) {
        var url = $("input[name='url']").val();
        var code = $("input[name='code']").val();
        if(stripePayCheck)
        {
            stripePayCheck = false;
            $.showPreloader('お支払中');
            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    code: code,
                    stripeToken:token.id
                },
                success: function (data) {
                    $.hidePreloader();
                    if (data.code)
                    {
                        $.alert('お支払成功！', function () {
                            $.showPreloader('ロード中');
                            setTimeout(function () {
                                window.location.href = 'https://www.tokubuy.jp/pay/card_url/success?time='+Math.random();
                            }, 3000);
                        });
                    } else {
                        $.alert(data.msg);
                        stripePayCheck = true;
                        stripeTokenCheck = true;
                    }
                }
            });
        }
    }
    //初始化
    $.init();
};